<template>
	<view class="shop-page cbg-f7f7f7" style="height: 100%;">
		<image src="https://picsum.photos/750/290?blur=3" style="width:100%;height: 290rpx;" mode="scaleToFill" />
		<view class="ml-26 mr-26 cbg-fff shadow"
			style="position: relative;z-index: 1;border-radius: 18rpx;margin-top:-150rpx">
			<view class="pl-26 pr-32 pt-46 grid g-ai-center" style="grid-template: 76rpx 48rpx 70rpx / 32rpx 1fr 32rpx;">
				<view style="grid-column: 1 / -1;align-self: flex-start;">{{ shopName }}</view>
				<text class="iconfont icon-Clock"></text>
				<view class="pl-16 fs-24 cfs-666"><text>营业中</text><text>00:00-23:59</text></view>
				<text class="iconfont icon-phone-fill cfs-666" @click="callPhone()"></text>
				<text class="iconfont icon-shop"></text>
				<view class="pl-16 fs-24 cfs-666">东西湖中心广场</view>
				<text class="iconfont icon-positon cfs-666" @click="mapLocation"></text>

			</view>
		</view>
		<view v-if="type === 1" class="pt-60 pb-60 cbg-fff mt-50 shadow grid"
			style="grid-template: 186rpx / repeat(2,1fr);border-radius: 18rpx;">
			<view class="flex f-column-nowrap f-ai-center f-jc-between border-right" @click="toPreOrderPage()">
				<text class="iconfont icon-yuegaotongzhi cfs-dc6b56" style="font-size:76rpx"></text>
				<view class="fs-30 cfs-333">预点餐</view>
				<view class="fs-24 cfs-666">提前点 到店吃</view>
			</view>
			<view class="flex f-column-nowrap f-ai-center f-jc-between" @click="toOrderPage">
				<text class="iconfont icon-yuegaotongzhi cfs-dc6b56" style="font-size:76rpx;"></text>
				<view class="fs-30 cfs-333">订单</view>
				<view class="fs-24 cfs-666">查看订单详情</view>
			</view>
		</view>
		<view v-if="type === 2" class="mt-50 shadow cbg-fff h-78 grid"
			style="padding: 110rpx 240rpx 110rpx 255rpx;grid-template: 52rpx 26rpx / 68rpx 1fr; gap:0 40rpx;">
			<text class="iconfont icon-yuegaotongzhi cfs-dc6b56" style="grid-row:1 / -1;font-size:76rpx;"></text>
			<view class="fs-30 cfs-333 g-js-center">订单</view>
			<view class="fs-24 cfs-666">查看订单详情</view>
		</view>

		<view class="pl-26 pt-30 pb-16 fs-30 cfs-333">菜品推荐</view>
		<u-scroll-list :indicator="false">
			<view class="scroll-list flex f-row-nowrap"  v-if="recommendFoodList.length"> 
				<view class="mr-20 cbg-fff" style="height:284rpx;border-radius: 24rpx;overflow: hidden;" v-for="(item) in recommendFoodList" :key="item.id">
					<image :src="item.img" style="width: 226rpx;height: 170rpx;;"></image>
					<view class="mt-28 ml-20 fs-24 cfs-333">{{ item.subject }}</view>
				</view>
			</view>
		</u-scroll-list>

	</view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState: FoodMapState } = createNamespacedHelpers('Food')
import { makePhoneCall, navigateToPage } from '@/utils/uniappFn'
import { recommendFoodList } from '@/apis/home'
import goodsSwiper from "@/components/pyh-goodsSwiper.vue"

export default {
	name: 'ShopPage',
	components: { goodsSwiper },
	data() {
		return {
			type: 1,
			recommendFoodList: [],
			configData: {
				multiple: 3,
				radius: 0,
				height: 168,
				nextMargin: 20
			},
		};
	},

	created() {
		this.getRecommendFoodList()
	},
	computed: {
		...FoodMapState({
			shopName: 'shopName'
		})
	},
	methods: {
		async getRecommendFoodList() {
			const r = await recommendFoodList()
			this.recommendFoodList = r
		},

		async callPhone(phoneNumber = '15051748719') {
			await makePhoneCall(phoneNumber)
		},
		async mapLocation() {
			const params = {
				latitude: 30.538114,
				longitude: 114.224358,
				name: '汉阳区墨水湖公园',
				address: '湖北省武汉市汉阳区国博大道'
			}
			await uni.openLocation(params); //默认会打开地图页面，不用自己新建map页面
		},
		toOrderPage() {
			navigateToPage('/subpkg_shop/order/order')
		},
		toPreOrderPage() {
			navigateToPage('/subpkg_shop/preOrder/preOrder')
		},
		tapList(e) {
			console.log(e.id, e.index);
		},
		swiperChange(e) {
			console.log('e', e)
		}
	}
}
</script>

<style lang="scss" scoped>
.recommend-box {
	/deep/ .orange-content {
		height: 284rpx;
	}

	/deep/ .swiper-item {
		padding-bottom: 116rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	/deep/.subject {
		margin-top: 28rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #333;
	}

}
</style>
